<template>
  <div class="videoContent" >
    <h3 v-if="videoData.title" class="title">{{ videoData.title.length>200?videoData.title.substring(0,200)+"...":videoData.title }}</h3>
    <div class="other">
      <span v-if="videoData.author">{{ $t('author') }}：{{ videoData.author.length>30?videoData.author.substring(0,30)+"...":videoData.author }}</span>
    <span v-if="videoData.createTime!=''">{{ $t('time') }}：{{ videoData.createTime }}</span></div>
    <video id="video" ref="video" width="620" height="320" controls="controls" autoplay class="video-player-change-rate">
      your browser does not support the video tag
    </video>
    <p class="play-rate-icon">
      <span class="p-r-10">{{ $t('multiple_play') }}</span>
      <el-radio-group v-model="playbackRate" @change="playRateChange">
        <el-radio v-for="item in rateOptions" :label="item.label" :key="item.label">{{ item.name }}</el-radio>
      </el-radio-group>
    </p>
    <h3 v-if="currentType===-1" >{{ errorMsg }}</h3>
  </div>
</template>
<script>
import { getVideoPreview } from '@/api/preview.js';
import videoPlayRateJs from '@/mixins/videoPlayRate.js';
import { parseTime } from '@/utils/index.js';

export default {
  name: 'VideoPreview',
  mixins: [videoPlayRateJs],
  props: {
    newsType: {
      type: Number,
      required: true
    },
    newsId: {
      type: [String, Number],
      default: ''
    },
    resources: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      currentType: this.newsType,
      errorMsg: '',
      videoData: {
        title: '',
        author: '',
        createTime: '' // 创建时间
      }
    };
  },
  mounted() {
    const myVideo = document.getElementById('video');
    if (this.newsId === '') {
      if (JSON.stringify(this.resources) == '{}') {
        this.errorMsg = this.$t(
          'Cannot_find_information_source_cannot_preview'
        );
        this.currentType = -1;
        return false;
      } else {
        this.videoData.title = this.resources.title;
        myVideo.src = this.resources.videoUrl;
      }
    } else {
      const newsId = this.newsId;

      getVideoPreview({ newsId }).then(result => {
        if (result.state === 1) {
         if (result.result.canPreview == 0) {
            this.errorMsg = this.$t('Transcoding_cannot_support_preview');
            this.currentType = -1;
          } else {
            this.videoData = {
              title: result.result.title,
              author: result.result.author,
              createTime: parseTime(result.result.createTime)
            };
            myVideo.src = result.result.videoUrl;
           }
        } else {
          this.errorMsg = result.error_msg;
          this.currentType = -1;
        }
      });
    }
    myVideo.onerror = () => {
      this.$message({
        message: this.$t('Upload_video_source_failed'),
        type: 'error'
      });
    };
  }
};
</script>
<style lang="scss" scoped>
//视频预览
.videoContent {
  width: 620px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 30px;
}
.title {
  padding: 10px 16px 0px;
}
.other {
  padding: 0px 18px 0px;
  line-height: 28px;
  & span {
    padding-right: 16px;
  }
}
.play-rate-icon {
  font-size: 12px;
  line-height: 24px;
  .p-r-10 {
    padding-right: 10px;
  }
}
</style>

